<template>
  <div class="echarts-root">
    <div :id="ecahrtId" style="width: 100%" :style="{ height: cHeight }"></div>
  </div>
</template>

<script setup>
//K线图加柱状图
import * as echarts from "echarts";
import { onMounted, onUnmounted } from "vue";

const ecahrtId = "echartsBarDom" + Math.floor(Math.random() * 10000);

const props = defineProps({
  // 图表高度，带单位
  cHeight: {
    type: String,
    default: "400px",
  },
  list: {
    type: Array,
    default: () => {
      return [];
    },
  },
  //标题是否显示
  titleBoolean: {
    type: Boolean,
    default: false,
  },
  //标题内容
  title: {
    type: String,
    default: "标题",
  },
});

watch(
  () => props.list,
  (value) => initEcharts(value)
);
console.log(" props.list", props.list);
//图表对象
var echartsObj = null;

//初始化图表
const initEcharts = (seriesDatas = []) => {
  let echartsDom = document.getElementById(ecahrtId);
  echarts.dispose(echartsDom);
  echartsObj = echarts.init(echartsDom);

  let arr = [];
  for (let index = 0; index < 35; index++) {
    arr.push("Mon" + index);
  }
  let option = {
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: arr,
    },
    yAxis: [
      {
        name: "库水位",
        type: "value",
        interval: 20,
        color: "#5453fa",
      },
      {
        name: "降雨量",
        type: "value",
        interval: 20,
      },
    ],
    grid: {
      left: "7%",
      top: 30,
      right: "7%",
      bottom: 20,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    series: [
      {
        name: "库水位",
        data: [
          150, 230, 224, 218, 135, 147, 260, 180, 235, 280, 240, 160, 177, 230,
          180, 235, 280, 240, 160, 177, 230, 180, 235, 280, 240, 160, 177, 230,
          180, 235, 280, 240, 160, 177, 230,
        ],
        type: "line",
        color: "#5453fa",
      },
      {
        name: "排水量",
        data: [
          180, 235, 280, 240, 160, 177, 230, 180, 235, 280, 240, 160, 177, 230,
          180, 235, 280, 240, 160, 177, 230, 180, 235, 280, 240, 160, 177, 230,
          180, 235, 280, 240, 160, 177, 230,
        ],
        color: "#fafd11",
        type: "line",
        yAxisIndex: 1,
      },
      {
        name: "处理水",
        data: [
          211, 285, 210, 230, 180, 117, 280, 211, 285, 210, 230, 180, 117, 280,
          211, 285, 210, 230, 180, 117, 280, 211, 285, 210, 230, 180, 117, 280,
          211, 285, 210, 230, 180, 117, 280,
        ],
        yAxisIndex: 1,
        color: "#fd83fc",
        type: "line",
      },

      {
        name: "降雨量",
        type: "bar",
        color: "#ff9021",
        yAxisIndex: 1,
        barGap: 0,
        data: [
          320, 332, 301, 334, 390, 320, 280, 320, 332, 301, 334, 390, 320, 280,
          320, 332, 301, 334, 390, 320, 280, 320, 332, 301, 334, 390, 320, 280,
          320, 332, 301, 334, 390, 320, 280,
        ],
      },
    ],
  };

  echartsObj.setOption(option);

  window.addEventListener("resize", () => {
    if (echartsObj) {
      echartsObj.resize();
    }
  });
};

const timer = ref();
onUnmounted(() => {
  clearTimeout(timer);
});
onMounted(() => {
  timer.value = setTimeout(() => {
    initEcharts();
  }, 1000);
});
</script>

<style lang="scss" scoped>
.echarts-root {
  position: relative;
  width: 100%;
  // height: 100%;
}
</style>